<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <style>
        body {
            height: 2000px;
        }
    </style>

</head>

<body>
    <script>
        /*
        在某个规定的时间内，节流函数至少执行一次。
        函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。
        节流： 控制高频事件执行次数    
        应用场景： 多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件
        */
    </script>
    <!-- <div id="content"
        style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
    </div> -->
    <script>
        //  window.onscroll =function () {
        //     console.log("不节流,高频事件");
        // }
        window.onscroll = throttle(function () {
            console.log("节流");
        }, 500)
        function throttle(fn, delay) {
            let flag = true;
            return function () {
                if (flag) {
                    setTimeout(() => {
                        fn.call(this);
                        flag = true;
                    }, delay);
                }
                flag = false;
            }
        }

        // let num = 1;
        // let content = document.getElementById('content');

        // function count() {
        //     content.innerHTML = num++;
        // };
        // content.onmousemove = throttle(count, 1000);

        // //options为可传入的参数，默认传入{leading=true;trailing=true}
        // //如果传入leading=false，则在wait时间内没有触发的话，wait秒后自动执行func函数；
        // //如果传入trailing=false，在wait时间内没有触发的话，下一次触发会执行func函数。
        // function throttle(func, wait, options) {
        //     let time, context, args, result;
        //     let previous = 0;
        //     if (!options) options = {};

        //     let later = function () {
        //         previous = options.leading === false ? 0 : new Date().getTime();
        //         time = null;
        //         func.apply(context, args);
        //         if (!time) context = args = null;
        //     };

        //     return () => {
        //         let now = new Date().getTime();
        //         if (!previous && options.leading === false) previous = now;
        //         let remaining = wait - (now - previous);
        //         context = this;
        //         args = arguments;
        //         if (remaining <= 0 || remaining > wait) {
        //             if (time) {
        //                 clearTimeout(time);
        //                 time = null;
        //             }
        //             previous = now;
        //             func.apply(context, args);
        //             if (!time) context = args = null;
        //         } else if (!time && options.trailing !== false) {
        //             time = setTimeout(later, remaining);
        //         }
        //     };
        // }
    </script>


</body>

</html>